<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<title>Document</title>

		<style>
			.shadowedImage {
				position: relative;
			}

			.shadowedImage::after {
				content: '';
				width: 100%;
				height: 100%;
				position: absolute;
				background: inherit;
				background-position: center center;
				filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.5)) blur(20px);
				z-index: -1;

				/* animation time! */
				animation: oscillate 1s cubic-bezier(0.17, 0.67, 0.45, 1.32) infinite alternate;
			}

			@keyframes oscillate {
				from {
					transform: scale(1, 1);
				}

				to {
					transform: scale(1.1, 1.1);
				}
			}

			.shadowedImage {
				margin: 100px;
				width: var(--data-width);
				height: var(--data-height);
				max-height: 150px;
				background-image: var(--data-image);
				background-repeat: no-repeat;
				background-size: contain;
			}
		</style>
	</head>
	<body>
		<div class="parent">
			<div
				class="shadowedImage"
				style="--data-width: 164px; --data-height: 48px; --data-image: url('https://sf3-scmcdn2-tos.pstatp.com/xitu_juejin_web/dcec27cc6ece0eb5bb217e62e6bec104.svg')"
			></div>
			<div
				class="shadowedImage"
				style="--data-width: 164px; --data-height: 164px; --data-image: url('https://sf1-dycdn-tos.pstatp.com/img/bytedance-cn/4ac74bbefc4455d0b350fff1fcd530c7~noop.image')"
			></div>
			<div
				class="shadowedImage"
				style="--data-width: 164px; --data-height: 164px; --data-image: url('https://sf1-ttcdn-tos.pstatp.com/img/bytedance-cn/4bcac7e2843bd01c3158dcaefda77ada~noop.image')"
			></div>
		</div>
	</body>
</html>
